<!doctype html>
<html lang="es">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

        <style>
            /* Fondo en degrade */
            .gradient-custom {
                background: linear-gradient(to bottom right, rgb(28, 174, 241), rgb(8, 104, 163))
              }
              .box{
              display: flex !important;
              justify-content: center;
              width: 100%;
              margin-bottom: 30px;
              box-shadow: 3px 0px 30px rgba(0, 0, 0, 0.2);
              padding: 30px 0px;
            }
            .navbar {
                height: 60px;
            }
        </style>

        <title>Reto #1 - El lenguaje Hacker</title>
    </head>
    <body>
        <!-- Navbar -->
        <nav class=" navbar navbar-dark bg-dark" style="display: flex; align-items: center; justify-content: center;">
            <a class="navbar-brand" style="text-align: center; color: aliceblue;">Reto #1 - pachulujambio</a>

            <img src="https://mouredev.com/wp-content/uploads/2018/11/mouredev_72x72.png" width="30" height="30">
        </nav>
        <!-- FONDO FUERA DEL CARD CON ESTILO PARA GENERAR EL DEGRADADO -->
        <div class="mask d-flex align-items-center h-100 gradient-custom">
            <div class="container">
            <!-- CENTRA EL CONTENEDOR -->
            <div class="row justify-content-center">
                <!-- AJUSTO EL TAMAÑO DEL CONTENDOR CENTRAL -->
                <div class="col-lg-14">  
                <!-- CREA UN CARD (rectángulo blanco centrado que hace de fondo al form) -->
                <div class="card">
                    <!-- MARGENES INTERNOS DEL CARD -->
                    <div class="card-body p-4 p-md-5">
                        <!-- IMAGEN -->
                        <div style="display: flex; justify-content: center; align-items: center;">
                            <img class="mb-4" src="https://mouredev.com/wp-content/uploads/2018/11/mouredev_logo.png" width="200" height="72" style="margin-top: -40px;" >
                        </div>
            
                        <!-- Textos  -->
                        <center>
                            <h3>El lenguaje Hacker</h3>
                        </center>
                        <h4 style="margin-top: 30px">Enunciado</h4>
                        <text class="mt-2 text-muted">
                            Escribe un programa que reciba un texto y transforme lenguaje natural a "lenguaje hacker" (conocido realmente como "leet" o "1337"). Este lenguaje se caracteriza por sustituir caracteres alfanuméricos. Utiliza esta tabla (https://www.gamehouse.com/blog/leet-speak-cheat-sheet/) con el alfabeto y los números en "leet". (Usa la primera opción de cada transformación. Por ejemplo "4" para la "a").
                        </text>

                        <!-- INPUT para el texto del usuario -->
                        <h4 for="Usertext" style="margin-top: 30px;  margin-bottom: 20px;">Ejercicio </h4>
                        <input class="form-control" id="Usertext" placeholder="Ingrese el texto que quieres traducir..." type="text">

                        <!-- Box con el texto traducido -->
                        <h4 for="hackerTextH4" style="margin-top: 30px; margin-bottom: 20px;">Traducción</h4>
                        <div class="box">
                            <p style="text-align: center" id="hackerText">Texto en idioma hacker!</p>
                        </div>
                        </div>

                        <!-- Pie de página -->
                        <p class="mt-2 mb-3 text-muted" style="justify-content: center; display: flex;">Web creada por &nbsp;<A HREF="https://github.com/pachulujambio"> Valentín Lujambio </A></p>
                    </div>
                </div>
                </div>
            </div>
            </div>
        </div>
        <script>
            // Se crean las variables con los elementos del body
            let userTextFunction = document.getElementById("Usertext");
            const hackerText = document.getElementById("hackerText");
            const alphabet = {  "A": "4", 
                                "B": "|3", 
                                "C": "[", 
                                "D": "|)", 
                                "E":"3",
                                "F":"|=",
                                "G":"6",
                                "H":"#",
                                "I":"1",
                                "J":",_|",
                                "K":">|",
                                "L":"|_",
                                "M":"IVI",
                                "N":"|\|",
                                "O":"0",
                                "P":"|*",
                                "Q":"(_,)",
                                "R":"I2",
                                "S":"5",
                                "T":"7",
                                "U":"|_|",
                                "V":"|/",
                                "W":"Ш",
                                "X":"><",
                                "Y":"j",
                                "Z":"2",
                                "0":"()",
                                "1":"L",
                                "2":"R",
                                "3":"E",
                                "4":"A",
                                "5":"S",
                                "6":"G",
                                "7":"T",
                                "8":"B",
                                "9":"q",}

            userTextFunction.oninput= function(){
                hackerText.textContent = "";

                for(let letter of userTextFunction.value.toUpperCase()){
                    if (letter in alphabet) {
                        hackerText.textContent += alphabet[letter];
                    }else{
                        hackerText.textContent += letter;
                    }
                }
                
            }

        </script>
    </body>
</html>
